<script>
import { getShowImage } from "@/utils"
import request from "@/utils/request"

export default {
  name: "banner",
  methods: {
    getShowImage,
    bannerClick(item) {
      //无跳转逻辑
      if (!item.jumpType || item.jumpType === "NONE") return
      //跳转到小程序
      if (item.jumpType === "Applet" && item.appid) {
        uni.navigateToMiniProgram({
          appId: item.appid,
          path: item.jumpPath,
        })
        return
      }
      //跳转站内页面
      if (item.jumpType === "Instation" && item.jumpPath) {
        uni.navigateTo({
          url: item.jumpPath,
        })
        uni.switchTab({
          url: item.jumpPath,
        })
        return
      }
      //跳转h5页面
      if (item.jumpType === "H5" && item.jumpPath) {
        uni.navigateTo({
          url: "/pages/web-view/web-view?path=" + encodeURIComponent(item.jumpPath),
        })
        return
      }
    },
  },
  data() {
    return {
      bannerList: [],
    }
  },
  props: {
    position: [String,Number],
    bannerListProps: Array,
    height: {
      type: String,
      default: "320rpx",
    },
		showIndicatorDots: {
			type: Boolean,
			default: true,
		},
  },
  created() {
		if (this.position) {
      //发送请求获取轮播图
      //获取轮播图列表
      request({
        url: "rotationChart/page",
        data: {
          size: -1,
          current: 1,
          position: this.position,
        },
        showLoading: true,
        errorHandle: true,
      }).then((data) => {
        this.bannerList = data.records
      })
    } else {
      this.bannerList = this.bannerListProps
    }
  },
}
</script>

<template>
  <swiper :circular="true" class="swiper" v-if="bannerList.length > 0" :indicator-dots="showIndicatorDots && bannerList.length > 1" :style="{ height: height }" :autoplay="true">
    <swiper-item class="swiper-item" v-for="item in bannerList" :key="item.id" @click="bannerClick(item)">
      <image class="image" mode="aspectFill" :src="getShowImage(item.imagePath)"></image>
    </swiper-item>
  </swiper>
</template>

<style scoped lang="scss">
.swiper {
	width: 100%;
  .swiper-item {
    .image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
